import http from "@/request"
import account from "@/store/account"
import { billType } from "@/types"
import { MoneyFormat } from "@/utils/format"
import { View, Text } from "@tarojs/components"
import moment from "moment"
import React, { useEffect, useState } from "react"
import Taro from "@tarojs/taro"
import "./index.scss"

const Ranking: React.FC<
    {
        month?: string
        filterData?: {
            name: string
            itemId: number
            categoryType: string
            moneyType: string
        }
    }> = ({ month, filterData }) => {
        const { name, itemId, categoryType, moneyType } = filterData || { itemId: undefined, categoryType: undefined, moneyType: undefined }
        const [rankingData, setRankingData] = useState<billType[]>([])
        const queryRankingData = () => {
            if (!month) return
            const mon = moment(month)
            const params: {
                category?: number,
                userId?: number,
                type?: number
            } = {}
            if (itemId) {
                params.type = moneyType === 'income' ? 1 : 0
                if (categoryType === 'category') {
                    params.category = itemId
                } else {
                    params.userId = itemId
                }
            }
            http.post('/bills/ranking', {
                startDate: mon.startOf('month').format('YYYY-MM-DD'),
                endDate: mon.endOf('month').format('YYYY-MM-DD'),
                accountId: account.activeAccount?.id,
                ...params
            }).then(res => {
                setRankingData(res.data || [])
            })
        }
        useEffect(() => {
            queryRankingData()
        }, [month, filterData])

        const showMore = () => {
            Taro.navigateTo({
                url: `/pages/bills/index?month=${month}`
            })
        }

        const nameMap = {
            income: '收入',
            expense: '支出',

        }

        return (
            <View className="report-card font-size24 card-background flex-column">
                <View className="report-item-title font-size28 flex-row flex-item">
                    <View className="title-content flex1">{moment(month).format('YYYY年M月')}{name || ''}{(moneyType && nameMap[moneyType]) || '金额'}前五</View>
                    <View onClick={showMore} className="btn flex-row flex-item">
                        <View>查看更多</View>
                        <Text className="iconfont font-size32 icon-base-right"></Text>
                    </View>
                </View>
                {rankingData.map((item, index) => {
                    return (<View className="rank-item" key={item.id}>
                        <View className="ranking-title flex-row">
                            <View className="report-item-val font-size40">{index + 1}.</View>
                            <View className="flex1">{item.categoryName}</View>
                            <View>{item.userName}</View>
                        </View>
                        <View className="report-item-bill flex-row flex-item">
                            <View className="flex1">{item.note || '-'}</View>
                            <View className="bill-count">{item.type === 1 ? '收入' : '支出'}{MoneyFormat(item.amount)}</View>
                        </View>
                    </View>)
                })}
            </View>
        )
    }

export default Ranking